<template>
  <div class="box1">
    <div class="box2">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item
          class="box"
          v-for="(item, i) in getinfo2"
          :key="i"
          :to="item.path"
          >{{ item.title }}</el-breadcrumb-item
        >
      </el-breadcrumb>
    </div>
    <div class="box3">
      <div>
        <el-dropdown @command="fn">
          <span class="el-dropdown-link">
            欢迎你：{{ info.account
            }}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="fn2">个人中心</el-dropdown-item>
            <el-dropdown-item command="fn3">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <img :src="info.imgUrl" alt="" />
    </div>
  </div>
</template>

<script>

import { apigr_js } from "@/utils/api.js";
//引入存储
import local from "@/utils/sess.js";
export default {
  data() {
    return {
      info: "",
      //面包屑渲染
      getinfo2: [],
    };
  },
   
  methods: {
    //通过command方式拿到了它的值
    fn(val) {
      //console.log(val);
      //判断  如果是第一个值  就跳转到个人中心
      if (val == "fn2") {
        this.$router.push("/timg");
      } else if (val == "fn3") {
        local.clear();
        this.$router.push("/login");
      }

      //判断如果是第二个值就退出登录
    },
    
    getinfo3() {
    //拿到roter里面的值
    //定义一个数组
    //由于添加之后没有首页  手动添加一个
    let arr = [{ path: "/home", title: "首页" }];
    this.$route.matched.forEach((element) => {
      //console.log(element);
      //把拿到的值push出去然后渲染

      //判断 如果path不为空  才渲染
      if (element.path !== "") {
        arr.push({
          path: element.path,
          title: element.meta.title,
        });
      }
    });

    this.getinfo2 = arr;
  },
    //获取用户列表  自定义函数
    async getinfo() {
      //把里面的数据结构出来
      let { accountInfo } = await apigr_js();
      //把拿到的数据渲染上去
      this.info = accountInfo;

      local.set("info", JSON.stringify(accountInfo));
    },

    //思路  在头部渲染然后通过本地存储给个人中心发数据  个人中心拿到数据之后进行渲染
    //渲染头像的刷新 就是把头像通过上传头像页面传参到这个页面  进行重绘
  },
 
 created() {
    //打印拿过来的值

    this.getinfo();
    //接收发过来的值
    this.$bus.$on("srurl", () => {
      this.getinfo();
    });
    this.getinfo3();
  },
  //创建一个监听器自动监听 然后不用f5 就可以刷新
  watch: {
    "$route.path"() {
      this.getinfo3();
    },
  },
};
</script>

<style lang="less" scoped>
.box {
  font-size: 18px;
}
.box1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.box3 {
  display: flex;

  vertical-align: middle;
  div {
    line-height: 40px;
    margin-right: 15px;
  }
  img {
    height: 40px;
    width: 40px;
    border-radius: 50%;
  }
}
</style>